<div class="pick_lucky">
<% case params[:type_id].to_i %>
<% when 1 %>
  <div>
    <table class="table table-bordered table-stripped">
      <% @users.limit(20).each_slice(4) do |users| %>
        <tr>
          <% users.each do |user| %>
            <td class="roll_div" style="border: solid 1px; width: 150px;"><%= user.name %></td>
          <% end %>
        </tr>
      <% end %>
    </table>
    <%= hidden_field_tag 'hidden_user_name_1', @users.pluck(:name).join(",") %>
    <br/>
    <div id="load_div_1" style="width: 100%; height: 30px; border: solid 1px;border-radius: 20px;" >
      <div id="load_inner_div_1" style="width: 0%; height: 100%; background-color: rgb(0,190,190);border-radius: 20px;" ></div>
    </div>
  </div>
  </div>
  <%= hidden_field_tag 'hidden_type', @type_id %>
  <script type="text/javascript">
    var roll_timer = setInterval(roll_div, 10);
    var random_string_string = $('#hidden_user_name_1').val();
    var random_string_array = random_string_string.split(',');
    var count_down = 10000;
    var origin_count_down = 10000;
    var type_id = $('#hidden_type').val();
    var $load_inner_div = $('#load_inner_div_1')
    function roll_div(){
      var random_val = '';
      if(count_down > 0) {
        $('.roll_div').each(function(){
          random_val = random_string_array[Math.floor(Math.random()*random_string_array.length)];
          $(this).text(random_val);
          count_down = count_down - 1;
          var load_p_i = (origin_count_down - count_down) / (origin_count_down / 100);
          var load_p_s = load_p_i.toString() + "%";
          $load_inner_div.css('width', load_p_s);
        })
      } else {
        clearTimeout(roll_timer);
        $.ajax({
          url: '/luckies/gen_lucky_user',
          type: 'post',
          data: {type: type_id},
          success: function(){}
        })
      }
    }
  </script>
  <hr/>
<% when 2 %>

  <div>
    <table class="table table-bordered table-stripped">
      <% @users2.limit(20).each_slice(4) do |users| %>
        <tr>
          <% users.each do |user| %>
            <td class="roll_div1" style="border: solid 1px; width: 150px;"><%= user.name %></td>
          <% end %>
        </tr>
      <% end %>
    </table>
    <%= hidden_field_tag 'hidden_user_name_2', @users2.pluck(:name).join(",") %>
    <div id="load_div_2" style="width: 100%; height: 30px; border: solid 1px;border-radius: 20px;" >
      <div id="load_inner_div_2" style="width: 0%; height: 100%; background-color: rgb(0,190,190);border-radius: 20px;" ></div>
    </div>
  </div>
  <script type="text/javascript">
    var roll_timer = setInterval(roll_div, 10);
    var count_down = 10000;
    var origin_count_down = 10000;
    var $load_inner_div = $('#load_inner_div_2')
    var random_string_string = $('#hidden_user_name_2').val();
    var random_string_array = random_string_string.split(',');

    function roll_div(){
      var random_val = '';
      if(count_down > 0) {
        $('.roll_div1').each(function(){
          random_val = random_string_array[Math.floor(Math.random()*random_string_array.length)];
          $(this).text(random_val);

          $(this).text(random_val);
          count_down = count_down - 1;
          var load_p_i = (origin_count_down - count_down) / (origin_count_down / 100);
          var load_p_s = load_p_i.toString() + "%";
          $load_inner_div.css('width', load_p_s);
        })
      } else {
        clearTimeout(roll_timer);
        $.ajax({
          url: '/luckies/gen_lucky_user',
          type: 'post',
          data: {type: '2'},
          success: function(){}
        })
      }
    }
  </script>
  <hr/>

<% when 3 %>
  <div>
    <table class="table table-bordered table-stripped">
      <% @users3.limit(20).each_slice(4) do |users| %>
        <tr>
          <% users.each do |user| %>
            <td class="roll_div2" style="border: solid 1px; width: 150px;"><%= user.name %></td>
          <% end %>
        </tr>
      <% end %>
    </table>
    <%= hidden_field_tag 'hidden_user_name_3', @users3.pluck(:name).join(",") %>
    <div id="load_div_3" style="width: 100%; height: 30px; border: solid 1px;border-radius: 20px;" >
      <div id="load_inner_div_3" style="width: 0%; height: 100%; background-color: rgb(0,190,190);border-radius: 20px;" ></div>
    </div>
  </div>
  <script type="text/javascript">
    var roll_timer = setInterval(roll_div, 5);
    var count_down = 10000;
    var origin_count_down = 10000;
    var $load_inner_div = $('#load_inner_div_3')
    var random_string_string = $('#hidden_user_name_3').val();
    var random_string_array = random_string_string.split(',');

    function roll_div(){
      var random_val = '';
      if(count_down > 0) {
        $('.roll_div2 ').each(function(){
          random_val = random_string_array[Math.floor(Math.random()*random_string_array.length)];
          $(this).text(random_val);

          $(this).text(random_val);
          count_down = count_down - 1;
          var load_p_i = (origin_count_down - count_down) / (origin_count_down / 100);
          var load_p_s = load_p_i.toString() + "%";
          $load_inner_div.css('width', load_p_s);
        })
      } else {
        clearTimeout(roll_timer);
        $.ajax({
          url: '/luckies/gen_lucky_user',
          type: 'post',
          data: {type: '3'},
          success: function(){}
        })
      }
    }
  </script>
  <hr/>
<% when 4 %>
  <div>
    <table class="table table-bordered table-stripped">
      <% @users4.limit(20).each_slice(4) do |users| %>
        <tr>
          <% users.each do |user| %>
            <td class="roll_div" style="border: solid 1px; width: 150px;"><%= user.name %></td>
          <% end %>
        </tr>
      <% end %>
    </table>
    <%= hidden_field_tag 'hidden_user_name_1', @users4.pluck(:name).join(",") %>
    <br/>
    <div id="load_div_1" style="width: 100%; height: 30px; border: solid 1px;border-radius: 20px;" >
      <div id="load_inner_div_1" style="width: 0%; height: 100%; background-color: rgb(0,190,190);border-radius: 20px;" ></div>
    </div>
  </div>
  <script type="text/javascript">
    var roll_timer = setInterval(roll_div, 50);
    var random_string_string = $('#hidden_user_name_1').val();
    var random_string_array = random_string_string.split(',');
    var count_down = 1000;
    var origin_count_down = 1000;
    var size = $('#choosen_number').val();
    var $load_inner_div = $('#load_inner_div_1')
    function roll_div(){
      var random_val = '';
      if(count_down > 0) {
        $('.roll_div').each(function(){
          random_val = random_string_array[Math.floor(Math.random()*random_string_array.length)];
          $(this).text(random_val);
          count_down = count_down - 1;
          var load_p_i = (origin_count_down - count_down) / (origin_count_down / 100);
          var load_p_s = load_p_i.toString() + "%";
          $load_inner_div.css('width', load_p_s);
        })
      } else {
        clearTimeout(roll_timer);
        $.ajax({
          url: '/luckies/gen_anne_lucky_user',
          type: 'post',
          data: {},
          success: function(){}
        })
      }
    }
  </script>
<% end %>
<%= link_to '返回', setting_luckies_path %>
